<template>
  <el-dialog
      :title="!isEdit?'新增视频':'修改视频'"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="500px"
  >
    <el-form ref="form" :model="videoInfo" label-width="80px" size="small"
             v-loading="loading"
             :rules="rules"
             :element-loading-text="loadingMessage">
      <el-form-item label="名称" prop="name">
        <el-input v-model="videoInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="视频封面" prop="imgURL">
        <el-upload
            action="#"
            ref="imgUploadRef"
            :http-request="onImgUpload"
            :before-upload="beforeImgUpload"
            :multiple="false"
            :show-file-list="false">
          <img v-if="videoInfo.imgURL" :src="videoInfo.imgURL" class="edit-video-img">
          <div v-else class="edit-video-upload">
            <i class="iconfont icon-add-select"></i>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频" prop="VideoURL">
        <el-upload
            action="#"
            :http-request="onVideoUpload"
            :before-upload="beforeVideoUpload"
            :multiple="false"
            :show-file-list="false">
          <el-button type="primary" size="small">选择文件</el-button>
        </el-upload>
        {{ videoInfo.videoName }}
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {baseRequest} from "@/utils/http/request";

export default {
  name: "UploadVideoDialog",
  emits:['save'],
  data() {
    return {
      // 是否是编辑
      isEdit: false,
      visible: false,
      loading: false,
      loadingMessage: '',
      videoInfo: {
        name: '',
        imgURL: '',
        VideoURL: '',
        videoName: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入工地名称', trigger: 'blur' },
        ],
        imgURL:[
          { required: true, message: '请选择视频封面', trigger: 'change' },
        ],
        VideoURL:[
          { required: true, message: '请选择视频', trigger: 'change' },
        ]
      }
    }
  },
  methods: {
    openDialog(info) {
      if (info) {
        this.videoInfo = info
        this.isEdit = true
      } else {
        this.videoInfo = {}
        this.isEdit = false
      }
      this.visible = true
    },
    onImgUpload(data) {
      let formData = new FormData()
      formData.append('fileobject', data.file)
      this.loading = true
      this.loadingMessage = '正在上传图片'
      baseRequest.upload(formData).then(res => {
        if (res) {
          // this.$set()
          // this.videoInfo.imgURL = res
          this.$set(this.videoInfo, 'imgURL', res)
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.$refs['form'].validate()
      })
    },
    onVideoUpload(data) {
      let formData = new FormData()
      formData.append('fileobject', data.file)
      this.loading = true
      this.loadingMessage = '正在上传视频'
      baseRequest.upload(formData).then(res => {
        if (res) {
          this.$set(this.videoInfo, 'VideoURL', res)
          this.$set(this.videoInfo, 'videoName', data.file.name)
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.$refs['form'].validate()
      })
    },
    beforeImgUpload(file) {
      const isJPG = file.type.indexOf('image') > -1;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('请上传图片!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false
      }
      return isJPG && isLt2M;
    },
    beforeVideoUpload(file) {

      const isVideo = file.type.indexOf('video') > -1;
      const isLt300M = file.size / 1024 / 1024 < 300;

      if (!isVideo) {
        this.$message.error('请上传视频!');
        return false
      }
      if (!isLt300M) {
        this.$message.error('上传视频大小不能超过 300MB!');
        return false
      }
      return isVideo && isLt300M;
    },
    handleSave(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.visible = false
          this.$emit('save',this.videoInfo)
        } else {
          return false;
        }
      });

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/base.scss";

.edit-video-img {
  object-fit: cover;
  width: 200px;
}

.edit-video-upload {
  border-color: $color-black-800;

  i {
    color: $color-black-800;
  }

  &:hover {
    border-color: $color-info-500;

    i {
      font-size: 3rem;
      color: $color-info-500;
    }
  }
}
</style>
